<template>
  <div class="web-notice">
    <div class="addprogram">
      <el-button type="primary" @click="addAnnouncement">新增公告</el-button>
    </div>
    <!-- 创建公告 -->
    <el-dialog v-if="addCard" :visible.sync="addCard" :before-close="closeDialog" title="新增公告" width="590px">
      <el-form ref="createInfo" :model="addCardData" :rules="rules">
        <el-form-item :label-width="formLabelWidth" label="公告标题" prop="title">
          <el-input v-model="addCardData.title" style="width:400px"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="发布时间" prop="startTime">
          <el-date-picker v-model="addCardData.startTime" type="date" style="width:400px"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="结束时间" prop="endTime">
          <el-date-picker v-model="addCardData.endTime" type="date" style="width:400px"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="公告内容" prop="content">
          <tinymce v-model="addCardData.content" :height="200" style="width:400px;"/>
        </el-form-item>
        <div class="foot">
          <ul>
            <li style="text-indent:20px;">1.公告将显示在网站首页顶部导航上方</li>
            <li style="text-indent:20px;">2.最多可显示3条最新的进行中的通告</li>
          </ul>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitAnnouncement">提 交</el-button>
      </div>
    </el-dialog>

    <subtable
      :table-label="webNoticeLabel"
      :table-data="webNoticeData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
    >
      <el-table-column slot="first" label="公告标题" min-width="40" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.title }}</div>
        </template>
      </el-table-column>
      <el-table-column slot="second" label="公告内容" min-width="300" align="center">
        <template slot-scope="scope">
          <div v-html="scope.row.content">
            <div>{{ scope.row.content }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column slot="button" :min-width="50" label="操作" prop="manage" align="center">
        <template slot-scope="scope">
          <el-dropdown
            split-button
            type="primary"
            @click="editDetail(scope.row)"
            @command="handleCommand($event,scope.row)"
          >编辑
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </subtable>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
  import Subtable from '@/components/Eltable'
  import Pagination from '@/components/Pagination' // 分页组件
  import Tinymce from '@/components/Tinymce'
  import {addAnnouncement, delAnnouncement, getAnnouncementList, updateAnnouncement} from '@/api/operate/announcement' // 数据接口
  import {getTenantId, getUserId, getUserName} from '@/utils/auth'

  export default {
    components: {
      Subtable,
      Tinymce,
      Pagination
    },
    data() {
      return {
        formLabelWidth: '100px',
        total: 0,
        currentpage: 1,
        pagesize: 10,
        addCard: false,
        addCardData: {
          startTime: '',
          endTime: '',
          content: ''
        },
        webNoticeLabel: [
          {
            label: '发布时间',
            width: '40',
            prop: 'startTimeStr'
          },
          {
            label: '结束时间',
            width: '40',
            prop: 'endTimeStr'
          },
          {
            label: '状态',
            width: '40',
            prop: 'status'
          },
          {
            label: '发布人',
            width: '40',
            prop: 'userName'
          }
        ],
        webNoticeData: [],
        listFilter: [],
        activeName: '1',
        rules: {
          title: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          startTime: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          endTime: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ],
          content: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      handleChange(val) {
        this.addCardData = val
      },
      handleSizeChange(val) {
        console.log(val);
        this.currentpage = 1;
        this.pagesize = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        console.log(val);
        this.currentpage = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      closeDialog() {
        this.addCard = false;
        this.addCardData = {startTime: '', endTime: '', content: ''}
      },
      getData() {
        getAnnouncementList().then(response => {
          this.webNoticeData = response.data.items.filter(item => {
            if (item.tenantId !== getTenantId()) return false;
            return true
          });
          this.webNoticeData.map(item => {
            if (item.startTime > new Date()) {
              item.status = '即将开始'
            } else if (item.startTime < new Date() && item.endTime > new Date()) {
              item.status = '进行中'
            } else if (item.endTime < new Date()) {
              item.status = '已结束'
            }
            item.startTimeStr = new Date(item.startTime).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '');
            item.endTimeStr = new Date(item.endTime).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '')
          });
          this.total = this.webNoticeData.length;
          this.listFilter = this.webNoticeData
        })
      },
      handleCommand(command, row) {
        if (command === '1') {
          this.$confirm('是否确定删除该公告', '删除公告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delAnnouncement(row.id).then(res => {
              this.$notify({
                title: '成功',
                message: '删除成功！',
                type: 'success',
                duration: 2000
              });
              this.getData()
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消'
            })
          })
        }
      },
      editDetail(row) {
        this.addCardData = Object.assign({}, row);
        this.addCard = true
      },
      addAnnouncement() {
        this.addCard = true;
        this.addCardData = {}
      },
      submitAnnouncement() {
        this.$refs.createInfo.validate((valid) => {
          if (valid) {
            if (this.addCardData.id) {
              updateAnnouncement(this.addCardData).then(res => {
                this.$notify({
                  title: '成功',
                  message: '修改成功！',
                  type: 'success',
                  duration: 2000
                });
                this.getData()
              })
            } else {
              this.addCardData.userId = getUserId();
              this.addCardData.userName = getUserName();
              this.addCardData.tenantId = getTenantId();
              addAnnouncement(this.addCardData).then(res => {
                this.$notify({
                  title: '成功',
                  message: '创建成功！',
                  type: 'success',
                  duration: 2000
                });
                this.getData()
              })
            }
            this.addCard = false;
            this.addCardData = {startTime: '', endTime: '', content: ''}
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .web-notice {
    padding: 14px 20px 0 20px;

    .addprogram {
      width: 100%;
      // padding: 0 0 21px 0;
      margin-bottom: 21px;
      height: 36px;

      .el-button {
        float: right;
      }
    }

    .el-dialog {
      border-radius: 6px;

      .foot {
        margin-top: 20px;
        padding: 15px 15px;
        border-radius: 5px;
        background-color: #d9edf7;
        color: #326f8f;
        border-left: 5px solid #50bfff;

        ul {
          text-decoration: none;
          margin: 0;
          padding: 0;
          list-style: none;

          li {
            margin-top: 5px;
          }
        }
      }
    }
  }
</style>
